<template>
  <div class="top">
    <el-button type="info" @click="send" icon="el-icon-message" circle></el-button>
    <ul>
      <li
        ref="list"
        v-drag
        :class="{ list1: true }"
        v-for="(item, index) in eyelist"
        @click="enter(index)"
        :style="{ left: random().lf + 'px', top: random().rg + 'px' }"
        :key="index"
      >
        <div class="head">
          {{ item.name1 }}
          <i class="el-icon-s-promotion"></i>
          {{ item.name2 }}
        </div>
        <div class="body">
          <p>{{ item.remark }}</p>
        </div>
        <div class="foot"></div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Eyelist",
  directives: {
    drag: function (el) {
      let dragBox = el; //获取当前元素
      dragBox.onmousedown = (e) => {
        //算出鼠标相对元素的位置
        let disX = e.clientX - dragBox.offsetLeft;
        let disY = e.clientY - dragBox.offsetTop;
        document.onmousemove = (e) => {
          //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
          let left, top;
          if (e.clientX - disX > 0 && e.clientY - disY > 0) {
            left = e.clientX - disX;
            top = e.clientY - disY;
          } else {
            if (e.clientX - disX < 0) {
            left = 0;
              top = e.clientY - disY;
            } else {
              left = e.clientX - disX;
              top = 0;
            }
          }
          //移动当前元素
          dragBox.style.left = left + "px";
          dragBox.style.top = top + "px";
        };
        document.onmouseup = (e) => {
          //鼠标弹起来的时候不再移动
          document.onmousemove = null;
          //预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动）
          document.onmouseup = null;
        };
      };
    },
  },
  data() {
    return {
      isclk: false,
      eyelist: [
        {
          name1: "张三",
          name2: "张三丰",
          remark:
            "于都恍惚，某度浮ddfsdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd反",
        },
        {
          name1: "李四",
          name2: "李四光",
          remark: "于都恍惚，某度浮ddfddddddddddddddddddddddd反",
        },
      ],
    };
  },
  created() {
    console.log(this.random().lf);
  },
  methods: {
    send(){
        
    },
    enter(e) {
      if (!this.isclk) {
        // console.log(this.$refs.list);
        for (let i = 0; i < this.$refs.list.length; i++) {
          if (this.$refs.list[i].classList.value.includes("zdex")) {
            this.$refs.list[i].classList.remove("zdex");
          }
        }
        this.$refs.list[e].classList.add("zdex");
      }
    },
    random() {
      let x = this._.random(0, 900);
      let y = this._.random(0, window.innerHeight - 300);
      return { lf: x, rg: y };
    },
  },
};
</script>

<style lang="scss" rel="stylesheet/scss">
* {
  padding: 0;
  margin: 0;
}
ul {
  list-style: none;
}
.zdex {
  z-index: 2;
}
.top {
  height: 100vh;
  background-image: url("../image/bg_main.jpg");
}
.list1 {
  width: 240px;
  position: absolute;

  top: 30px;
  left: 50px;
  /* background-color: red; */
  min-height: 300px;
}
.head {
  color: purple;
  width: 100%;
  height: 67px;
  padding-left: 23px;
  padding-top: 50px;
  font-size: 12px;
  /* padding: 10px; */
  /* padding-right: 10px;*/

  position: relative;

  background: url("../image/a1_1.gif"), no-repeat;
}
.body {
  width: 100%;
  height: 120px;

  overflow: hidden;
  font-size: 12px;
  /* padding: 10px; */
  /* padding-right: 10px; */

  position: relative;
  color: #3875d7;
  background: url("../image/a1_2.gif"), no-repeat;
  p {
    word-wrap: break-word;
    padding: 20px;
  }
}
.foot {
  width: 100%;
  height: 67px;
  font-size: 12px;
  /* padding: 10px; */
  /* padding-right: 10px; */

  position: relative;
  color: #3875d7;
  background: url("../image/a1_3.gif"), no-repeat;
}
</style>